<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		article{
			height: 150px;
			background-color: #ccc
		}

		article div{
			width: 100px;
			height: 100px;
			background-color: red;
			margin:10px;
			float: left;
			color: #fff
		}

		div.one{
			background-color: blue
		}
		div.two{
			background-color: orange
		}




	</style>
	<script type="text/javascript">
window.onload=function(){
	var btns=document.getElementsByTagName('button');

	var article=document.getElementsByTagName("article")[0];
	var div1=document.getElementById("one");
	var div3=document.getElementById("three");

	var clone=div1.cloneNode(true);
	btns[0].onclick=function(){
		/*console.log(div1);
		console.log(clone);*/
		article.appendChild(clone);
	}


	btns[1].onclick=function(){
		article.insertBefore(clone,div3);
	}

	btns[2].onclick=function(){
		article.replaceChild(clone,div3);
	}

	btns[3].onclick=function(){
		article.removeChild(div3);
	}






}



	</script>
</head>
<body>
	<article>
		<div class="one" id="one">div1</div>
		<div class="two">div2</div>
		<div class="three" id="three">div3</div>
	</article>
	<button>追加</button>
	<button>插入</button>
	<button>替换</button>
	<button>移除</button>
</body>
</html>







